<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0}
div{ 
       width:300px; 
	   height:300px;
	   background:#F33;
	   filter: alpha(opacity:30);
	   margin:10px;
	   float:left;
	   opacity:0.3;
	  }

</style>
 <script>
 window.onload=function()
{
	var oDiv=document.getElementsByTagName('div');//获得元素
	for(var i=0;i<oDiv.length;i++)
		{
		/*oDiv[i].timer=null;	*/
		oDiv[i].alpha=30;	
		
		oDiv[i].onmouseover=function()
		{
			startMove(this,100);
		}
		oDiv[i].onmouseout=function()
		{
			startMove(this,30);
		}
		
		/*oDiv.onmouseover=function()//移入事件
		{
			startMove(100);
			}
			oDiv.onmouseout=function()//移出事件
		{
			startMove(30);
			}*/
	}
	}
	/*var alpha=30;
	/*var timer=null;*/
	function startMove(obj,iTarget){//定义函数
        clearInterval(obj.timer);   //清空事件以免重复触发
       /* var oDiv=document.getElementById('div1');*///函数内获取元素
		obj.timer=setInterval(function(){   //定义定时器
		var speed=0;                            //定义速度属性
		if(obj.alpha>iTarget)           //判断当前的left值与目标值的关系
		{
			speed=-10;                         //大于目标值速度则是负值
		}
		else
		{
			speed=10;                          //否则速度则是正值
		}
		if(obj.alpha==iTarget)           //等于目标值则停止运动
		{
			clearInterval(obj.timer)               //清空定时器
		}
		else{
			obj.alpha+=speed;                                 //运动速度
			obj.style.filter='alpha( opacity:'+obj.alpha+')' ;//IE透明度赋值
			obj.style.opacity=obj.alpha/100;                //火狐透明度最终赋值   
		}
            
			  
			
		},30)
	}
</script>
</head>

<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>

</body>
</html>
